<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import LoginView from "./views/login/LoginView.vue";
import MainView from "./views/main/MainView.vue";
import AddUserView from "./views/user/AddUserView.vue";
import FriendRequestView from "./views/user/FriendRequestView.vue";

/**
 * 应用根组件
 * 负责管理应用的顶层路由逻辑，根据URL hash切换显示登录页面或主页面
 * 使用Vue 3的Composition API实现
 */

/**
 * 当前显示的视图状态
 */
const currentView = ref("login");

/**
 * 检查URL hash并设置当前显示的视图
 * 根据hash值决定显示登录页面还是主页面
 * @returns {void}
 */
function checkHash() {
  const hash = window.location.hash;
  if (hash === "#/main" || hash === "#main") {
    currentView.value = "main";
  } else if (hash === "#/adduser" || hash === "#adduser") {
    currentView.value = "adduser";
  } else if (hash === "#/login" || hash === "#login") {
    currentView.value = "login";
  } else if (hash === "#/friendrequest" || hash === "#friendrequest") {
    currentView.value = "friendrequest";
  }
}

/**
 * URL hash变化事件处理函数
 * 当URL的hash部分发生变化时被调用，用于更新当前显示的视图
 * @returns {void}
 */
function handleHashChange() {
  checkHash();
}

/**
 * 组件挂载生命周期钩子
 * 在组件首次渲染到DOM后执行
 * 检查当前URL hash并设置事件监听
 * @returns {void}
 */
onMounted(() => {
  // 初始检查URL hash
  checkHash();
  // 添加hash变化事件监听
  window.addEventListener("hashchange", handleHashChange);
});

/**
 * 组件卸载生命周期钩子
 * 在组件从DOM中移除之前执行
 * 清理资源，移除之前添加的事件监听
 * @returns {void}
 */
onUnmounted(() => {
  // 移除hash变化事件监听
  window.removeEventListener("hashchange", handleHashChange);
});
</script>

<template>
  <!-- 动态组件渲染 -->
  <!-- 根据currentView的值条件渲染登录页面或主页面 -->
  <LoginView v-if="currentView === 'login'" />
  <AddUserView v-else-if="currentView === 'adduser'" />
  <MainView v-else-if="currentView === 'main'" />
  <FriendRequestView v-else-if="currentView === 'friendrequest'" />
</template>

<style scoped>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* HTML和body样式设置 */
html,
body,
#app {
  height: 100%; /* 确保页面元素撑满整个视口高度 */
}
</style>
